<template>
	<view class="preferential">
		<u-tabs :list="tabList" :is-scroll="false" :current="current" @change="change"></u-tabs>
		<view class="pre-box">
			<view class="pre-item" v-for="item in showList" :key="item">
				<view class="money">
					<view v-if="item.couponType == 1" style="width: auto">
						<span style="font-size: 30rpx">折</span>
						<span style="font-size: 80rpx;">{{ item.discount }}</span>
					</view>
					<view v-else style="width: auto">
						<span style="font-size: 30rpx">币</span>
						<span style="font-size: 80rpx;">{{ item.cutAccount }}</span>
					</view>
					<view v-if="item.threshold == 0" style="font-size: 20rpx;color: #e5dcbf">无门槛</view>
					<view v-else style="font-size: 20rpx;color: #e5dcbf">满{{ item.threshold }}币可使用</view>
				</view>
				<view class="line"></view>
				<view class="title">
					<view style="font-size: 40rpx;color: #996819">{{ item.couponName }}</view>
					<!-- <view style="margin: 10rpx 0rpx;font-size: 20rpx;color: #e5dcbf">仅限xxx类订单</view> -->
					<view style="font-size: 20rpx;color: #e5dcbf">使用开始时间:{{ item.beginTime }}</view>
					<view style="font-size: 20rpx;color: #e5dcbf">使用结束时间:{{ item.endTime }}</view>
				</view>
				<!-- <view class="btn">
					<view>使用</view>
				</view> -->
			</view>
		</view>

		<u-loadmore :status="status" @loadmore="loadMore" />
		<!-- <view class="submit-btn">
			<u-button :hair-line="false" :custom-style="customStyle" shape="circle">兑换优惠券</u-button>
		</view> -->
	</view>
</template>

<script>
	import {
		getCoupons
	} from "../../../api/coupon.js"
	export default {
		name: "index",
		async onLoad(option) {
			this.getCouponList()
			this.showList = this.couponAvailableList
		},
		data() {
			return {
				showList: [],
				couponUsedList: [],
				couponAvailableList: [],
				couponExpireList: [],
				couponTime: [0, 0, 0], // 优惠券类型是否请求过
				nextPage: [1, 1, 1], // 下一页页码
				tagCurrent: [0, 1, 2], // 对应标签标志
				coupon: {},
				customStyle: {
					marginTop: '60rpx', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					marginBottom: '60rpx', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					color: '#000',
					backgroundColor: '#fdd155',
					width: '95%',
				},
				tabList: [{
					name: '可使用'
				}, {
					name: '已使用'
				}, {
					name: '已过期'
				}],
				current: 0,
				status: 'loadmore',
				size: 10,
			}
		},
		methods: {

			async getCouponList() {
				if (this.nextPage[this.current] != 0) {
					const res = await getCoupons({
						tags: this.tagCurrent[this.current],
						page: this.nextPage[this.current],
						size: this.size,
					})
					let tmp = JSON.parse(JSON.stringify(res.data.data.list));
					tmp.map(e => {
						// console.log(e)
						this.coupon = {
							couponName: e.couponName,
							couponIntroduce: e.introduceByMold,
							couponType: e.ruleId,
							couponTypeIntroduce: e.introduceByRule,
							threshold: e.threshold,
							cutAccount: e.cutAccount,
							discount: e.discount,
							beginTime: e.expBegin,
							endTime: e.expEnd,
							condition: e.used,
						}
						if (this.current == 0) {
							this.couponAvailableList.push(this.coupon)
						} else if (this.current == 1) {
							this.couponUsedList.push(this.coupon)
						} else if (this.current == 2) {
							this.couponExpireList.push(this.coupon)
						}
					})

					this.nextPage[this.current] = res.data.data.nextPage

					// 展示是否还有更多
					if (this.nextPage[this.current] == 0) {
						this.status = 'nomore'
					}
				}
			},
			
			change(index) {
				this.current = index;
				// 
				if(this.couponTime[this.current] == 0){
					this.getCouponList()
				}
				if(this.current == 0){
					this.showList = this.couponAvailableList
				}else if(this.current == 1){
					this.showList = this.couponUsedList
				}else if(this.current == 2){
					this.showList = this.couponExpireList
				}

				// 展示是否有更多
				if (this.nextPage[this.current] == 0) {
					this.status = 'nomore'
				} else {
					this.status = 'loadmore'
				}


			},
			async loadMore() {
				this.getCouponList()
			},

		},
	}
</script>

<style lang="scss" scoped>
	.preferential {
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		padding: 20rpx;

		.pre-box {
			.pre-item {
				box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
				height: 200rpx;
				margin-bottom: 15rpx;
				border-radius: 10rpx;
				padding: 20rpx;
				background-color: #e2b078;
				display: flex;
				align-items: center;

				.money {
					flex: 2;
					color: #996819;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
				}

				.line {
					box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
					width: 4rpx;
					background-color: #e9ddbf;
					height: 85%;
					margin: 0rpx 20rpx;
				}

				.title {
					flex: 4;
					display: flex;
					flex-direction: column;
					justify-content: center;
					margin-left: 10rpx;
					//background-color: #000000;
				}

				.btn {
					flex: 2;

					view {
						color: white;
						background-color: #c48853;
						box-shadow: rgb(216, 161, 102) 0px 7px 29px 0px;
						height: 100rpx;
						width: 100rpx;
						border-radius: 50rpx;
						text-align: center;
						display: flex;
						justify-content: center;
						align-items: center;
						margin: 0 auto;
					}
				}
			}
		}
	}
</style>
